<template>
  <div class="w-100 h-100 d-flex justify-content-around">
    <div
      v-for="(item, index) in settingList"
      style="width: 23%d; text-align: center; padding-top: 60px"
    >
      <div
        style="
          width: 100%;
          height: 50px;
          color: #03e6fe;
          font-family: 'DIN-Bold';
          font-size: 40px;
        "
      >
        {{ item.count }}
      </div>
      <div
        style="
          width: 100%;
          height: 50px;
          font-family: 'OPPOSans-Regular';
          font-size: 20px;
          line-height: 50px;
        "
      >
        {{ item.label }}
      </div>
      <div class="bk">
 
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import zq from "@/assets/image/underGround/zq.png";

const settingList = ref([
  {
    count: 31,
    value: 13,
    label: "长期周期/个",
    star: 3,
  },
  {
    count: 98,
    value: 13,
    label: "较长周期/个",
    star: 3,
  },
  {
    count: 61,
    value: 11,
    label: "短期项目/个",
    star: 3,
  },
]);
</script>

<style scoped>
.bk {
    margin-top: 20px;
  width: 100%;
  height: 120px;
  font-family: "OPPOSans-Regular";
  font-size: 26px;
  color: #c6d1db;
  padding-top: 20px;
  background: url( "@/assets/image/underGround/zq.png" );
  background-size: 100% 100%;
  
}
</style>
